import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:webview_flutter/webview_flutter.dart';


//地图及物流组件
class MapTransportBox extends StatefulWidget {

  ///物流列表
  final List transportList;

  ///订单号
  final String? expressCode;

  ///物流公司名称
  final String? expresName;

  ///是否显示地图
  final bool? showMap;
  
  late bool expand = false;
  late String showTxt = '展开';
  late IconData showIcon = Icons.expand_more;

  

  MapTransportBox({super.key, required this.transportList, this.showMap=true,  this.expressCode='',  this.expresName=''});

  @override
  State<MapTransportBox> createState() => _MapTransportBoxState();
}

class _MapTransportBoxState extends State<MapTransportBox> {
  late WebViewController webViewCtr;

  @override
  void initState() {
    // 地图暂时不要了
    // webViewCtr = WebViewController()
    //   ..setJavaScriptMode(JavaScriptMode.unrestricted)
    //   ..loadRequest(Uri.parse('https://track.kdniao.com/#/result?code=f761e8c4ef6f12b75b982d542a2d3e8d337c1e1a2246f495b45037190b42a2b3'));

    super.initState();
  }


  @override
  Widget build(BuildContext context) {

 

    return Container(
          child: Column(
          children: [
            //顶部地图
              // Visibility(
              //   visible: widget.showMap!,
              //   child: Container(
              //   alignment: Alignment.center,
              //   height: 200.h,
              //   child: WebViewWidget(controller: webViewCtr)
              // ),),
              Container(
                  transform: Matrix4.translationValues(0, -5.h, 0),
                  padding: EdgeInsets.all(18.w),
                  width: 375.w,
                  decoration: border_radis(Colors.white),
                  child: Column(
                    children: [
                      //物流公司
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              // BaseImage(url: "https://www.cnlogo8.com/upimg/2014/ze5xntvmhys.gif", width: 28, height: 28,borderRadius: BorderRadius.circular(16),),
                              // SizedBox(width: 10.w,),
                              Text(widget.expresName!,style: TextStyle(fontSize: 12,fontWeight: FontWeight.w500)),
                              SizedBox(width: 4.w,),
                              Text(widget.expressCode!,style: TextStyle(fontSize: 12,fontWeight: FontWeight.w500)),
                            ],
                          ),
                          BaseInteractive(
                            onClick: () async => {
                                await Clipboard.setData(ClipboardData(text: widget.expressCode!)),
                                Tools.showToast("运单号已复制")
                            },
                            childWidget: Container(
                              decoration: border_radis(null,borderColor: Tools.fromHex("#D7D7D7")),
                              padding: EdgeInsets.fromLTRB(10.w, 2.w, 10.w, 2.w),
                              child: Text("复制",style: TextStyle(fontSize: 10,fontWeight: FontWeight.w500,color: Tools.fromHex("#3D3D3D"))),
                            ),
                          )
                        ],
                      ),
                      SizedBox(height: 20.w,),

                      //--物流信息---
                      Container(
                        // height: 235.h,
                        child: Column(
                          children:widget.transportList.isNotEmpty ? List.generate(widget.transportList.length, (index){
                              return TransInfoItem(index: index, msg: widget.transportList[index]['content'] as String, time:widget.transportList[index]['time'] as String,isShow: widget.expand && index >= 0 ?true:false,);
                          }):[TransInfoItem(index: 0, msg: "正在准备出库,请耐心等待", time: "")]
                        ),
                      ),
                      Container(
                        child: BaseInteractive(
                          onClick: () => {
                            showHide()
                          },
                          childWidget: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(widget.showTxt,style: TextStyle(fontSize: 13,fontWeight: FontWeight.w400,color: Tools.fromHex("#666666")),),
                              Icon(widget.showIcon,color: Tools.fromHex("#999999"))
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
            ),
            
          ],
        ),
        );
  }


  //展开收起
  void showHide(){
    setState(() {
      widget.expand = !widget.expand;
      if(widget.expand){
        //显示收起
        widget.showTxt = "收起";
        widget.showIcon = Icons.expand_less;
      }else{
        //显示展开
        widget.showTxt = "展开";
        widget.showIcon = Icons.expand_more;
      }
    });
  }
}

class TransInfoItem extends StatelessWidget {
  final int index;
  final bool isShow;
  final String msg;
  final String time;

  TransInfoItem({super.key, required this.index,  this.isShow=true, required this.msg, required this.time});

  late Color dotColor;
  late Color txtColor;

  @override
  Widget build(BuildContext context) {
    if (index == 0) {
      //第一个，颜色为红色
      dotColor = Tools.fromHex("#F83F2D");
      txtColor = Tools.fromHex("#F83F2D");
    } else if (index == 1) {
      dotColor = Tools.fromHex("#F83F2D");
      txtColor = Tools.fromHex("#333333");
    } else {
      dotColor = Tools.fromHex("#999999");
      txtColor = Tools.fromHex("#999999");
    }
    return Visibility(
      visible: index>0?isShow:true,
      child: Container(
      child: IntrinsicHeight(
        child: Row(
          children: [
            // 左边线和点
            Stack(
              children: [
                Container(
                  margin: const EdgeInsets.only(left: 4, right: 21),
                  width: 1,
                  color: Tools.fromHex("#999999"),
                ),
                Container(
                  width: 8.w,
                  height: 8.w,
                  decoration: BoxDecoration(
                      color: dotColor,
                      borderRadius:
                          const BorderRadius.all(Radius.circular(16))),
                ),
              ],
            ),
            // 右边控件
            Expanded(
                child: Container(
                  padding: EdgeInsets.only(bottom: 20.w),
                  child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(msg,
                    style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w400,
                        color: txtColor)),
                        SizedBox(height: 5.h,),
                Text(time,
                    style: TextStyle(
                        fontSize: 10,
                        fontWeight: FontWeight.w500,
                        color: txtColor))
              ],
            ),
                )),
          ],
        ),
      ),
    ));
  }
}
